import React, { useState, useEffect, useRef } from 'react'; // 这行必须写，不然报错，可能是eslint搞事情。
import {
  Row,
  Input,
  Form,
  DatePicker,
  Modal,
  message,
  TreeSelect,
  Radio,
  Select,
} from 'antd';
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TreeNode } = TreeSelect;
const { Option } = Select;
const { TextArea } = Input;
import { addUser } from '@/api/system/user.js';
const AddUserModalForm = ({
  treeData,
  visible,
  onCancel,
  oninitList,
  onhideUserModal,
}) => {
  const [form] = Form.useForm();
  const [selectTreeValue, setSelectTreeValue] = useState(null);
  useResetFormOnCloseModal({
    form,
    visible,
  });

  //点击添加用户
  const onOk = () => {
    form.submit();
  };

  const onChange = value => {
    // console.log(value)
    setSelectTreeValue(selectTreeValue);
  };

  //表单提交方法
  const onFinish = values => {

    // console.log(values)

    addUser(values).then(res => {
      if (res.code == 200) {
        message.success('添加用户成功');
        onhideUserModal();
        oninitList();
      } else if (res.code == 500) {
        message.warning(res.msg);
      }
    });
  };

  const postIdsChange=value=>{
    // console.log(value)
  }


  return (
    <Modal
      title="添加用户"
      visible={visible}
      onOk={onOk}
      className="system-user-add-modal"
      onCancel={onCancel}
      cancelText="取消"
      okText="确定"
      style={{
        padding: '30px 20px',
        color: '#606266',
        fontSize: '14px',
        wordBreak: 'break-all',
      }}
    >
      <Form
        form={form}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
        }}
        layout="vertical"
        name="userForm"
        labelAlign="right"
        layout="horizontal"
        className="addForm"
        onFinish={onFinish}
      >
        <Form.Item
          name="nickName"
          label="用户昵称"
          rules={[{ required: true, message: '用户昵称不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="deptId"
          label="归属部门"
          rules={[{ required: true, message: '归属部门不能为空' }]}
        >
          {treeData.length && (
            <TreeSelect
              style={{ width: '174px' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={treeData}
              placeholder="请选择归属部门"
            />
          )}
        </Form.Item>
        <Form.Item
          name="phonenumber"
          label="手机号码"
          rules={[
            { required: true, message: '手机号码不能为空' },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              max: 11,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[{ required: true, message: '邮箱地址不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="userName"
          label="用户名称"
          rules={[{ required: true, message: '用户名称不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="用户密码"
          rules={[{ required: true, message: '用户密码不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="sex" label="用户性别" className="xb">
          <Select style={{ width: 174 }}>
            <Option value={0}>男</Option>
            <Option value={1}>女</Option>
            <Option value={2}>未知</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status" label="状态" className="zt">
          <Radio.Group>
            <Radio value={0}>正常</Radio>
            <Radio value={1}>停用</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="postIds" label="岗位:" className="gw">
          <Select style={{ width: 174 }} mode="multiple" onChange={postIdsChange}>
            <Option value={1}>董事长</Option>
            <Option value={2}>项目经理</Option>
            <Option value={3}>人力资源</Option>
            <Option value={4}>普通员工</Option>
          </Select>
        </Form.Item>
        <Form.Item name="roleIds" label="角色">
          <Select style={{ width: 174 }} mode="multiple">
          <Option value={2}>普通角色</Option>
          </Select>
        </Form.Item>
        <Form.Item name="remark" label="备注" style={{ width: 550 }}>
          <TextArea rows={4} />
        </Form.Item>
      </Form>
    </Modal>
  );
};
// reset form fields when modal is form, closed
const useResetFormOnCloseModal = ({ form, visible }) => {
  const prevVisibleRef = useRef();
  useEffect(() => {
    prevVisibleRef.current = visible;
  }, [visible]);
  const prevVisible = prevVisibleRef.current;
  useEffect(() => {
    if (!visible && prevVisible) {
      form.resetFields();
    }
  }, [visible]);
};

export default AddUserModalForm;
